<template>
  <div style="padding: 10px">

    <!--//弹窗事件-->

    <div>

      <el-dialog id="change" :before-close="addHandleClose" :visible.sync="editDialogFormVisible" title="新增学院"
                 width="30%">


        <el-form ref="form" :model="form" label-width="80px">

          <el-form-item label="姓名" prop="studentName">

            <el-input v-model="form.studentId" :disabled="true"></el-input>

          </el-form-item>

          <el-form-item label="姓名" prop="studentName">

            <el-input v-model="form.studentName" :disabled="true"></el-input>

          </el-form-item>


          <el-form-item label="评分" prop="courseScore">

            <el-input v-model="form.courseScore" placeholder="请打分"></el-input>

          </el-form-item>


        </el-form>

        <div slot="footer" class="dialog-footer">

          <el-button icon="el-icon-error" plain type="danger" @click="editDialogFormVisible = false">取 消</el-button>

          <el-button icon="el-icon-success" type="success" @click="savecourseScore">确 定</el-button>

        </div>

      </el-dialog>

    </div>


    <el-card class="box-card">

      <div slot="header" class="clearfix">

        <span class="label">请选择课程</span>

        <el-select v-model="valueCourse" placeholder="请选择" @change="changeCourse">

          <el-option v-for="item in options" :key="item.courseId" :label="item.courseName" :value="item.courseId">

          </el-option>

        </el-select>

      </div>

      <!--表格事件-->

      <div class="home" style="margin: 10px">

        <el-table :data="tableData" :row-class-name="tableRowClassName" border header-cell-class-name="headerBg"
                  size="medium" style="width: 100%" @selection-change="handleSelectionChange">


          <el-table-column label="学生学号" prop="studentId">

          </el-table-column>

          <el-table-column label="姓名" prop="studentName">

          </el-table-column>

          <el-table-column label="性别" prop="studentGender">

          </el-table-column>

          <el-table-column label="所在班级" prop="className">

          </el-table-column>

          <el-table-column label="所在学院" prop="departmentName">

          </el-table-column>

          <el-table-column label="所属专业" prop="professionName">

          </el-table-column>

          <!--         <el-table-column  label="分数">-->

          <!--           <template slot-scope="scope">-->

          <!--           <el-rate-->

          <!--               v-model="scope.row.courseScore"-->

          <!--               disabled-->

          <!--               :max="6"-->

          <!--               show-score-->

          <!--               text-color="#ff9900"-->

          <!--               score-template="{value}">-->

          <!--           </el-rate>-->

          <!--
</template>-->
          <!--         </el-table-column>-->
          <el-table-column
              label="分数"
              prop="courseScore">
          </el-table-column>


          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" size="small" type="success" @click="handleEdit(scope.$index, scope.row)">

                评分

              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin: 10px 0">
          <el-pagination
              :current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[5, 7,10, 20]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
          </el-pagination>

        </div>

      </div>
    </el-card>

  </div>
</template>

<script>
import request from '@/utils/request';
export default {
  name: "TeaGrade",
  components: {},

  created() {
    this.load()
  },
  methods: {
    savecourseScore() {
      {
        this.form.courseId = this.valueCourse
        request.put("/userteacher/savecoursescore", this.form).then(response => {
          if (response) {
            {
              this.searchId = '';
              this.searchName = '';
              this.changeCourse()
              this.$message({
                showClose: true,
                message: '恭喜你，添加成功哦~',
                type: 'success'
              });
            }
          } else {
            this.searchId = '';
            this.searchName = '';
            this.changeCourse()
            this.$message({
              showClose: true,
              message: '添加失败！',
              type: 'error'
            });
          }

        })
      }
      this.editDialogFormVisible = false

    },

    changeCourse() {
      request.get("/userteacher/boundstudentpage", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          courseId: this.valueCourse,
          searchId: this.searchId,
          searchName: this.searchName
        }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total
      })

    },


    load() {
      let teacherId = JSON.parse(localStorage.getItem("user")).userId
      request.get("/userteacher/selectCourse/" + teacherId).then(res => {
        this.options = res
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },
    handleSizeChange(val) {
      this.pageSize = val
      // this.load()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // this.load()
      console.log(`当前页: ${val}`);
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex == 0) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    },
    handleEdit(index, row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.editDialogFormVisible = true
    },
  },
  data() {
    return {
      options: [],
      tableData: [],
      multipleSelection: [],
      valueCourse: '',
      searchId: '',
      searchName: '',
      pageSize: 7,
      total: 10,
      currentPage: 1,
      editDialogFormVisible: false,
      form: {
        studentId: '',
        courseId: '',
        courseScore: null
      },
    };
  }

}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.headerBg {
  background: #eee !important;
}
</style>
